<!-- <script lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
export default {
    name: 'Demo2',
    setup() {
        onBeforeMount(() => {
            console.log('onBeforeMount: 组件挂载之前执行，此时还没有开始 DOM 渲染');
        });

        onMounted(() => {
            console.log('onMounted: 组件挂载之后执行，此时 DOM 已经渲染完成');
        });

        onBeforeUpdate(() => {
            console.log('onBeforeUpdate: 组件更新之前执行');
        });

        onUpdated(() => {
            console.log('onUpdated: 组件更新之后执行');
        });

        onBeforeUnmount(() => {
            console.log('onBeforeUnmount: 组件卸载之前执行');
        });

        onUnmounted(() => {
            console.log('onUnmounted: 组件卸载之后执行');
        });
    }
};
</script> -->

<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

onBeforeMount(() => {
    console.log('onBeforeMount: 组件挂载之前执行，此时还没有开始 DOM 渲染');
});

onMounted(() => {
    console.log('onMounted: 组件挂载之后执行，此时 DOM 已经渲染完成');
});

onBeforeUpdate(() => {
    console.log('onBeforeUpdate: 组件更新之前执行');
});

onUpdated(() => {
    console.log('onUpdated: 组件更新之后执行');
});

onBeforeUnmount(() => {
    console.log('onBeforeUnmount: 组件卸载之前执行');
});

onUnmounted(() => {
    console.log('onUnmounted: 组件卸载之后执行');
});
</script>

<template>
    <div class="main_box">
        <h1>这个案例主要是 Vue3生命周期 的使用</h1>

        <div class="main_row">
            <p>onBeforeMount: 组件挂载之前执行，此时还没有开始 DOM 渲染</p>
            <p>onMounted: 组件挂载之后执行，此时 DOM 已经渲染完成</p>
            <p>onBeforeUpdate: 组件更新之前执行</p>
            <p>onUpdated: 组件更新之后执行</p>
            <p>onBeforeUnmount: 组件卸载之前执行</p>
            <p>onUnmounted: 组件卸载之后执行</p>
        </div>

        <div class="main_text">
            <p>setup()写法 和 script setup写法一样</p>
        </div>
    </div>
</template>

<style scoped></style>
